import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:gold/model/address_model.dart';
import 'package:gold/model/goods_detail_model.dart';
import 'package:gold/ui/integralmall/integral_order_viewmodel.dart';
import 'package:gold/widgets/http_image.dart';
import 'package:provider/provider.dart';
import 'package:gold/base/provider_scaffold.dart';
import 'package:gold/utils/res.dart';
import 'package:gold/utils/xfg_color.dart';
import 'package:gold/utils/xfg_size.dart';
import 'package:gold/widgets/common_widgets.dart';
import 'package:gold/widgets/xfg_text.dart';

/// @description: 积分-订单页面
/// @author tangzhentao
/// @created at 20:01 2024/11/30

class IntegralOrderPage extends StatelessWidget {
  /// 数量
  final int number;
  /// 积分商品信息
  final GoodsDetailModel goods;

  const IntegralOrderPage({required this.goods, required this.number,super.key});

  @override
  Widget build(BuildContext context) {
    return ProviderScaffold<IntegralOrderViewmodel>(
        appBar: (_) => xfgAppbar(title: '确认订单'),
        model: IntegralOrderViewmodel(goods, number),
        builder: (ctx, order) {
          final goods = order.goods;
          final pointsPrice = goods.pointsPrice?.toInt()?? 0;
          final price = goods.price?? 0;
          final limit = goods.limit?? 0;
          final freight = goods.freight?? 0;
          return Column(
            children: [
              Expanded(
                child: SingleChildScrollView(
                  padding: EdgeInsets.all(XfgSize().size10),
                  child: Column(
                    children: [
                      /// 地址
                      Builder(builder: (ctx) {
                        final address = ctx.select<IntegralOrderViewmodel, AddressModel?>((k) => k.address);
                        final Widget child;
                        if (address != null) {
                          child = Row(
                            children: [
                              Expanded(
                                child: Column(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: [
                                    Row(
                                      children: [
                                        Image.asset(Res.imagesAddress, width: XfgSize().size18, height: XfgSize().size20),
                                        SizedBox(width: XfgSize().size8),
                                        XfgText(address.name?? '', fontSize: XfgSize().text18, color: XfgColor.text1),
                                        SizedBox(width: XfgSize().size6),
                                        XfgText(address.phone?? '', fontSize: XfgSize().text16, color: XfgColor.text1),
                                      ],
                                    ),
                                    SizedBox(height: XfgSize().size6),
                                    XfgText(address.address?? '', fontSize: XfgSize().text14, color: XfgColor.text3),
                                  ],
                                ),
                              ),
                              Container(
                                height: XfgSize().size40,
                                width: XfgSize().size100,
                                alignment: Alignment.center,
                                decoration: BoxDecoration(border: Border.all(color: XfgColor.text2, width: XfgSize().size0_5), borderRadius: BorderRadius.circular(XfgSize().size40)),
                                child: XfgText('修改', color: XfgColor.text1, fontSize: XfgSize().text18),
                              )
                            ],
                          );
                        } else {
                          child = Row(
                            children: [
                              Image.asset(Res.imagesAddress, width: XfgSize().size18, height: XfgSize().size20),
                              SizedBox(width: XfgSize().size6),
                              XfgText('请选择收货地址', fontSize: XfgSize().text18, color: XfgColor.text3),
                              const Spacer(),
                              Image.asset(Res.imagesArrowRight, width: XfgSize().size10, height: XfgSize().size15)
                            ],
                          );
                        }
                        return Ink(
                          decoration: white6Decoration,
                          child: InkWell(
                            onTap: order.pickAddress,
                            borderRadius: BorderRadius.circular(XfgSize().size6),
                            child: Container(
                              padding: EdgeInsets.fromLTRB(XfgSize().size12, XfgSize().size15, XfgSize().size20, XfgSize().size15),
                              child: child,
                            ),
                          ),
                        );
                      }),
                      /// 商品信息
                      Container(
                        margin: EdgeInsets.symmetric(vertical: XfgSize().size10),
                        padding: EdgeInsets.fromLTRB(XfgSize().size10, XfgSize().size16, XfgSize().size10, XfgSize().size10),
                        decoration: white6Decoration,
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            XfgText('  ${goods.name}', fontSize: XfgSize().text16, color: XfgColor.text1, bold: FontWeight.w500),
                            SizedBox(height: XfgSize().size10),
                            Row(
                              children: [
                                HttpImage(goods.coverImage, size: Size.square(XfgSize().size100), radius: BorderRadius.circular(XfgSize().size4)),
                                SizedBox(width: XfgSize().size12),
                                Expanded(
                                  child: Column(
                                    crossAxisAlignment: CrossAxisAlignment.start,
                                    mainAxisAlignment: MainAxisAlignment.center,
                                    children: [
                                      Row(
                                        children: [
                                          XfgText(goods.name?? '', fontSize: XfgSize().text16, color: XfgColor.text2),
                                          SizedBox(width: XfgSize().size14),
                                          Container(
                                            height: XfgSize().size18,
                                            width: XfgSize().size12 + boundingTextSize('不支持七天无理由', style: TextStyle(fontSize: XfgSize().text12)).width,
                                            alignment: Alignment.center,
                                            decoration: BoxDecoration(
                                                border: Border.all(color: XfgColor.itemIntegration, width: XfgSize().size0_5),
                                                borderRadius: BorderRadius.circular(XfgSize().size2)
                                            ),
                                            child: XfgText('不支持七天无理由', fontSize: XfgSize().text12, color: XfgColor.itemIntegration),
                                          )
                                        ],
                                      ),
                                      SizedBox(height: XfgSize().size6),
                                      XfgText('单价：', fontSize: XfgSize().text16, color: XfgColor.text2, children: [
                                        TextSpan(text: '$pointsPrice积分+¥$price', style: TextStyle(color: XfgColor.itemMoney)),
                                      ]),
                                      SizedBox(height: XfgSize().size6),
                                      XfgText('库存(件)：', fontSize: XfgSize().text16, color: XfgColor.text2, children: [
                                        TextSpan(text: '${goods.stock?? 0}', style: TextStyle(fontSize: XfgSize().text16, color: XfgColor.text3)),
                                      ]),
                                    ],
                                  ),
                                )
                              ],
                            )
                          ],
                        ),
                      ),
                      /// 商品选购信息
                      Container(
                        margin: EdgeInsets.symmetric(vertical: XfgSize().size10),
                        decoration: white6Decoration,
                        child: Column(
                          children: [
                            Builder(builder: (ctx) {
                              final number = ctx.select<IntegralOrderViewmodel, int>((value) => value.number);
                              return Container(
                                height: XfgSize().size56 + XfgSize().size0_5,
                                padding: EdgeInsets.only(left: XfgSize().size16),
                                decoration: BoxDecoration(border: Border(bottom: BorderSide(width: XfgSize().size0_5, color: XfgColor.colorE))),
                                child: Row(
                                  children: [
                                    XfgText('数量', fontSize: XfgSize().text16, color: XfgColor.text1),
                                    const Spacer(),
                                    XfgText(limit == 0 ? '不限购':'限购5件', fontSize: XfgSize().text14, color: XfgColor.theme),
                                    SizedBox(width: XfgSize().size10),
                                    IconButton(
                                      onPressed: number > 1 ? () => order.number--:null,
                                      icon: Icon(CupertinoIcons.minus, size: XfgSize().size16, color: XfgColor.text3),
                                    ),
                                    Container(
                                      height: XfgSize().size22,
                                      width: XfgSize().size34,
                                      color: XfgColor.colorE,
                                      alignment: Alignment.center,
                                      child: XfgText(number.toString(),
                                          fontSize: XfgSize().text16, color: XfgColor.text2),
                                    ),
                                    IconButton(
                                      onPressed: (limit == 0 && number < (goods.stock?? 0)) || number < limit ? () => order.number++:null,
                                      icon: Icon(CupertinoIcons.plus, size: XfgSize().size16, color: XfgColor.text1),
                                    )
                                  ],
                                ),
                              );
                            }),
                            _itemWidget1('运费', freight > 0  ? '$freight元':'包邮', bottom: true),
                            Builder(builder: (con) {
                              final number = con.select<IntegralOrderViewmodel, int>((value) => value.number);
                              return _itemWidget1('会员积分', '${pointsPrice * number}积分');
                            })
                          ],
                        ),
                      ),
                      /// 支付信息
                      Builder(builder: (con) {
                        final balanceEnable = con.select<IntegralOrderViewmodel, bool?>((k) => k.balanceEnable);
                        final balanceNumber = con.select<IntegralOrderViewmodel, double>((k) => k.balanceNumber);
                        return Visibility(
                            visible: balanceEnable != null,
                            child: GestureDetector(
                              onTap: () => order.balanceEnable = !(balanceEnable?? false),
                              child: Container(
                                margin: EdgeInsets.only(top: XfgSize().size10),
                                decoration: white6Decoration,
                                height: XfgSize().size56,
                                padding: EdgeInsets.only(left: XfgSize().size12),
                                child: Row(children: [
                                  xfgRadio(value: (balanceEnable?? false)),
                                  SizedBox(width: XfgSize().size12),
                                  XfgText('使用余额积分，可抵扣', fontSize: XfgSize().text16, color: XfgColor.text1, children: [
                                    TextSpan(text: '  ¥', style: TextStyle(fontSize: XfgSize().text10, color: XfgColor.itemMoney, fontWeight: FontWeight.bold)),
                                    TextSpan(text: balanceNumber.toStringAsFixed(2), style: TextStyle(fontSize: XfgSize().text20, color: XfgColor.itemMoney, fontWeight: FontWeight.w500)),
                                  ])
                                ]),
                              ),
                            )
                        );
                      }),
                    ],
                  ),
                ),
              ),
              Container(
                margin: EdgeInsets.fromLTRB(XfgSize().size10, 0, 0, XfgSize().size10),
                alignment: Alignment.centerLeft,
                child: XfgText('*因黄金物品的特殊性，暂不支持七天无理由退货', fontSize: XfgSize().text14, color: XfgColor.itemMoney),
              ),
              /// 支付按钮
              Container(
                color: XfgColor.white,
                padding: EdgeInsets.only(bottom: XfgSize().bottomBarHeight),
                child: Padding(
                  padding: EdgeInsets.fromLTRB(0, XfgSize().size18, XfgSize().size10, XfgSize().size18),
                  child: SizedBox(
                    height: XfgSize().size50,
                    child: Row(
                      children: [
                        Expanded(
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.end,
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: [
                              XfgText('合计 ', color: XfgColor.text1, fontSize: XfgSize().text16),
                              SizedBox(height: XfgSize().size8),
                              Builder(builder: (con) {
                                final number = con.select<IntegralOrderViewmodel, int>((value) => value.number);
                                return XfgText('${pointsPrice * number}积分+¥${price * number}', color: XfgColor.theme, fontSize: XfgSize().text16);
                              })
                            ],
                          ),
                        ),
                        SizedBox(width: XfgSize().size10),
                        TextButton(
                          onPressed: order.payNow,
                          style: ButtonStyle(
                              backgroundColor: const WidgetStatePropertyAll(XfgColor.theme),
                              shape: WidgetStatePropertyAll(RoundedRectangleBorder(borderRadius: BorderRadius.circular(XfgSize().size4))),
                              fixedSize: WidgetStatePropertyAll(Size(XfgSize().size166, XfgSize().size50))
                          ),
                          child: XfgText('立即兑换', fontSize: XfgSize().text16, color: XfgColor.white, bold: FontWeight.w500),
                        )
                      ],
                    ),
                  ),
                ),
              )
            ],
          );
        },
    );
  }

  /// 通用布局1
  Widget _itemWidget1(String text, String subText, { bool bottom = false}) => Container(
    height: XfgSize().size56 + (bottom ? XfgSize().size0_5:0),
    padding: EdgeInsets.only(left: XfgSize().size16, right: XfgSize().size10),
    decoration: bottom ? BoxDecoration(border: Border(bottom: BorderSide(width: XfgSize().size0_5, color: XfgColor.colorE))):null,
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        XfgText(text, fontSize: XfgSize().text16, color: XfgColor.text1),
        XfgText(subText, fontSize: XfgSize().text16, color: XfgColor.text1),
      ],
    ),
  );
}
